<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>产品追溯</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
	<style type="text/css">
		.box{
			height:auto;
			margin: 20px 20px;
		}
		.site-doc-icon .layui-anim{
			display:inline-block;
			width: 120px; 
			height: 50px; 
			line-height: 50px; 
			margin: 0 20px; 
			text-align: center; 
			background-color: #009688; 
			cursor: pointer; 
			color: #fff; 
		}
		.tables td {
			height: 40px;
			width: 150px;
		}
		.tables th {
			height: 40px;
			width: 150px;
		}
		#tbody input{
			width: 60%;
			display: inline-block;
			float: right;
		}
		#tfoot_zc .layui-table-page{
			display: none;
		}
	</style>
</head>

<script type="text/html" id="leakHuntingList">
    {{d.LAY_TABLE_INDEX+1}} 次检漏
</script>
<script type="text/html" id="gasList">
    {{d.LAY_TABLE_INDEX+1}} 次气密性检测
</script>
<body>
	<div class="box site-doc-icon site-doc-anim">
	    <div class="layui-anim" data-anim="layui-anim-scale" onclick="toTab1()">根据组件号追溯</div>
	    <div class="layui-anim" data-anim="layui-anim-scale" onclick="selectByShedu()">根据排产单追溯</div>
	    <div class="layui-anim" data-anim="layui-anim-scale" onclick="selectByPici()">根据批次号追溯</div>
	</div>
		<table class="layui-table layui-hide" id="tab1" >
			<thead>
				<tr>
					<th>
						组件号
					    <div class="layui-inline">
					    	<input class="layui-input" name="tube" id="tube" placeholder="" style="display: inline; width: 80%">
					    </div>
					    <button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload" onclick="selectByTube()"><i class="layui-icon layui-icon-search">  搜索</i></button>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr style="background-color: #FFFFFF;">
					<td>
						<div class="layui-tab">
						  <ul class="layui-tab-title">
						    <li class="layui-this">排产单号</li>
						    <li>生产细节</li>
						    <li>操作人员信息</li>
						  </ul>
						  <div class="layui-tab-content">
						    <div class="layui-tab-item layui-show" id="sheduNumber">
						      	<table border="1 solid #000" id="table1" class="tables">
						      		<tr>
						    			<th>组装工位</th>
						    			<th>离心工位</th>
						    			<th>固化工位</th>
						    			<th>切割工位</th>
						    		</tr>
						    		<tr>
						    			<td id="s2"></td>
						    			<td id="s3"></td>
						    			<td id="s4"></td>
						    			<td id="s5"></td>
						    		</tr>
						    	</table>
						    </div>
						    <div class="layui-tab-item">
						   		 <table>
						    		<tr>
						    			<th>膜丝检测数据</th>
						    		</tr>
						    		<tr>
						    			<td><table class="layui-hide" id="ms" lay-filter="ms"></table></td>
						    		</tr>
						    	</table>
						    	<br/>
						    	<table border="1 solid #000" id="table2" style="text-align: center;">
						    		<tr>
						    			<th>组装工位</th>
						    			<th>固化工位</th>
						    			<th>切割工位</th>
						    		</tr>
						    		<tr>
						    			<td>
						    				<table class="tables">
						    					<tr>
						    						<td>组装时间</td>
						    					</tr>
						    					<tr>
						    						<td id="t2"></td>
						    					</tr>
						    				</table>
						    			</td>
						    			<td>
						    				<table class="tables">
						    					<tr>
						    						<th>绑定时间</th>
						    						<th>开始时间</th>
						    						<th>结束时间</th>
						    						<th>固化设定时长</th>
						    						<th>固化实际时长</th>
						    					</tr>
						    					<tr>
						    						<td id="bungdtime"></td>
						    						<td id="starttime"></td>
						    						<td id="endtime"></td>
						    						<td id="cremark5"></td>
						    						<td id="diff"></td>
						    					</tr>
						    				</table>
						    			</td>
						    			<td>
						    				<table class="tables">
						    					<tr>
						    						<th>A面硬度</th>
						    						<th>B面硬度</th>
						    						<th>操作时间</th>
						    					</tr>
						    					<tr>
						    						<td id="a"></td>
						    						<td id="b"></td>
						    						<td id="t5"></td>
						    					</tr>
						    				</table>
						    			</td>
						    		</tr>
						    	</table>
						    	<br/>
						    	<table>
						    		<tr>
						    			<th>离心工位</th>
						    		</tr>
						    		<tr>
						    			<td>
						    				<table>
						    					<tr>
						    						<th>离心机号</th>
						    						<th>几遍胶</th>
						    						<th>开始时间</th>
						    						<th>结束时间</th>
						    						<th>浇注时间</th>
						    					</tr>
						    					<tr>
						    						<td rowspan="3" id="ccode"></td>
						    						<td>一遍胶</td>
						    						<td id="k1"></td>
						    						<td id="e1"></td>
						    						<td id="j1"></td>
						    					</tr>
						    					<tr>
						    						<td>二遍胶</td>
						    						<td id="k2"></td>
						    						<td id="e2"></td>
						    						<td id="j2"></td>
						    					</tr>
						    					<tr>
						    						<td>三遍胶</td>
						    						<td id="k3"></td>
						    						<td id="e3"></td>
						    						<td id="j3"></td>
						    					</tr>
						    				</table>
						    			</td>
						    		</tr>
						    	</table>
						    	<br/>
						    	<table>
						    		<tr>
						    			<th>捡漏</th>
						    		</tr>
						    		<tr>
						    			<td><table class="layui-hide" id="leakHunting" lay-filter="leakHunting"></table></td>
						    		</tr>
						    	</table>
						    	<br/>
						    	<table>
						    		<tr>
						    			<th>组件评价</th>
						    		</tr>
						    		<tr>
						    			<td>
						    				<table>
						    					<tr>
						    						<td>运行水温（℃）</td>
						    						<td id="yxsw"></td>
						    						<td>进水压力（MPa）</td>
						    						<td id="jsyl"></td>
						    					</tr>
						    					<tr>
						    						<td>产水压力（MPa）</td>
						    						<td id="csyl"></td>
						    						<td>浓水压力（MPa）</td>
						    						<td id="nsyl"></td>
						    					</tr>
						    					<tr>
						    						<td>产水通量（T/h）</td>
						    						<td id="cstl"></td>
						    						<td>浓水通量（T/h）</td>
						    						<td id="nstl"></td>
						    					</tr>
						    					<tr>
						    						<td>运行时间（h）</td>
						    						<td id="yxTime"></td>
						    						<td>检测结果</td>
						    						<td id="evResult"></td>
						    					</tr>
						    				</table>
						    			</td>
						    		</tr>
						    	</table>
						    	<br/>
						    	<table>
						    		<tr>
						    			<th>气密打压</th>
						    		</tr>
						    		<tr>
						    			<td><table class="layui-hide" id="gas" lay-filter="gas"></table></td>
						    		</tr>
						    	</table>
						    </div>
						    <div class="layui-tab-item">
						    	<table border="1 solid #000" id="table3"  class="tables">
						    		<tr>
						    			<th>组装工位</th>
						    			<th>离心工位</th>
						    			<th>固化工位</th>
						    			<th>切割工位</th>
						    			<th>组件评价</th>
						    		</tr>
						    		<tr>
						    			<td id="p2"></td>
						    			<td id="p3"></td>
						    			<td id="p4"></td>
						    			<td id="p5"></td>
						    			<td id="testPerson"></td>
						    		</tr>
						    	</table>
						    </div>
						  </div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<table class="layui-table layui-hide" id="tab2">
			<thead>
				<tr>
					<th colspan="2">
						<span>排产单号</span>
						<div class="layui-inline">
							<input class="layui-input" name="keyword_zc" id="keyword_zc" style="width: 80%;display: inline;"/>
						</div>
						<button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload" onclick="selectProductTracingByOddNumber()"><i class="layui-icon layui-icon-search">搜索</i></button>
					</th>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td>
						<span>排产量</span>
						<input class="layui-input" id="zc_pcCount" name="zc_pcCount" readonly/>
					</td>
					<td></td>
					<!-- <td>
						<span>每日排产量</span>
						<input class="layui-input" id="zc_dayPcCount" name="zc_dayPcCount" readonly/>
					</td> -->
				</tr>
				<tr>
					<td>
						<span>排产日期</span>
						<input class="layui-input" id="zc_starttime" name="zc_starttime" readonly/>
					</td>
					<!-- <td>
						<span>结束时间</span>
						<input class="layui-input" id="zc_endtime" name="zc_endtime" readonly/>
					</td> -->
					<td>
						<span>合格入库量</span>
						<input class="layui-input" id="zc_qualified" name="zc_qualified" readonly/>
					</td>
				</tr>
				<tr>
					<td>
						<span>降级数量</span>
						<input class="layui-input" id="zc_demotion" name="zc_demotion" readonly/>
					</td>
					<td>
						<span>报废数量</span>
						<input class="layui-input" id="zc_baofeiNum" name="zc_baofeiNum" readonly/>
					</td>
				</tr>
			</tbody>
			<tfoot id="tfoot_zc">
				<tr>
					<td colspan="2">
						<h2 style="text-align: center;color:#666">物料用量及偏差率</h2>
						<table class="layui-hide" id="bomList" lay-filter="bomList"></table>
					</td>
				</tr>
			</tfoot>
		</table>
		<table class="layui-table layui-hide" id="tab3" >
			<thead>
				<tr>
					<th>
						批次号
					    <div class="layui-inline">
					    	<input class="layui-input" name="batchNum" id="batchNum" style="display: inline; width: 80%">
					    </div>
					    <button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload" onclick="selectByBatchNum()"><i class="layui-icon layui-icon-search">  搜索</i></button>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr style="background-color: #FFFFFF;">
					<td>
						<div class="layui-tab">
						  <ul class="layui-tab-title">
						    <li class="layui-this">入库日期</li>
						    <li>物料发放信息</li>
						    <li>组件的数量、组件编号</li>
						  </ul>
						  <div class="layui-tab-content">
						    <div class="layui-tab-item layui-show" id="sheduNumber">
						    	<table class="layui-hide" id="tableList1" lay-filter="tableList1"></table>
						      	<!-- <table border="1 solid #000" id="table1" class="tables">
						      		<tr>
						    			<th>批次号</th>
						    			<th>入库日期</th>
						    		</tr>
						    		<tr>
						    			<td><input class="layui-input" id="batchNumInp"></td>
						    			<td><input class="layui-input" id="inDateInp"></td>
						    		</tr>
						    	</table> -->
						    </div>	
						    <div class="layui-tab-item">
						    	<!-- 实例化一个Table -->
						   		<table class="layui-hide" id="tableList2" lay-filter="tableList2"></table>
						    </div>	
						    <div class="layui-tab-item">
						    	<table class="layui-hide" id="tableList3" lay-filter="tableList3"></table>
						    </div>
						  </div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/js/jyy/retrospect.js" charset="utf-8"></script>
<script>
$(function(){
	toTab1();
})


//根据组件号追溯
function toTab1(){
	$("#tab1").removeClass("layui-hide");
	$("#tab2").addClass("layui-hide");
	$("#tab3").addClass("layui-hide");
}
//根据排产单追溯
function selectByShedu(){
	$("#tab1").addClass("layui-hide");
	$("#tab2").removeClass("layui-hide");
	$("#tab3").addClass("layui-hide");
}

//根据批次号追溯
function selectByPici(){
	$("#tab1").addClass("layui-hide");
	$("#tab2").addClass("layui-hide");
	$("#tab3").removeClass("layui-hide");
}

//点击批次号查询
function selectByBatchNum(){
	//alert($("#batchNum").val());
	$.ajax({
		url:'${pageContext.request.contextPath}/lzProductTracing/queryIndateByBatchNum.do'
		,type:'post'
		,data: {batchNum : $("#batchNum").val()}
		/* ,dataType:'json' */
		,success:function(data){
			//alert(data);
			$("#batchNumInp").val($("#batchNum").val());
			$("#inDateInp").val(data);
		}
	})

	/* 根据批次号追溯2 */
    table.render({
        elem: '#tableList2'
        ,url:'${pageContext.request.contextPath }/lzProductTracing/queryLineSideLibraryOut.do'
        ,title: '线边库出库数据'
        ,id :'contenttable5'
        ,limits:[10,20,30]
        ,cols: [[
            {field:'productionOrder', title:'排产单号',width:200},
            {field:'outDate', title:'出库日期',width:200, templet:function (row) {
                    return dateToStr(row.outDate);
                }},
            {field:'reserve2', title:'配件编号',width:200},
            {field:'reserve3', title:'配件名称',width:200},
            {field:'outQuantity', title:'出库数量',width:200},
            {field:'batch', title:'批次号',width:200},
            {field:'reserve1', title:'班组名称',width:200}
        ]],
        page: true,
    });
}

//日期格式转换
function date2String(timestamp){
	var d = new Date(timestamp);
	var date = (d.getFullYear()) + "-" + 
       (d.getMonth() + 1<10?"0"+(d.getMonth() + 1):d.getMonth() + 1) + "-" +
       (d.getDate()<10?"0"+d.getDate():d.getDate()) + " " + 
       (d.getHours()<10?"0"+d.getHours():d.getHours()) + ":" + 
       (d.getMinutes()<10?"0"+d.getMinutes():d.getMinutes()) + ":" + 
       (d.getSeconds()<10?"0"+d.getSeconds():d.getSeconds());
       
       return date;
}
var table;		
layui.use(['table','layer','upload','form','laydate'], function(){
	table = layui.table;
	var layer = layui.layer;
    var form = layui.form,laydate = layui.laydate;
    var $ = layui.$;
    //演示动画
    $('.site-doc-icon .layui-anim').on('click', function(){
        var othis = $(this), anim = othis.data('anim');
        //停止循环
        if(othis.hasClass('layui-anim-loop')){
            return othis.removeClass(anim);
        }
        othis.removeClass(anim);
        setTimeout(function(){
            othis.addClass(anim);
        });
        //恢复渐隐
        if(anim === 'layui-anim-fadeout'){
            setTimeout(function(){
                othis.removeClass(anim);
            }, 1300);
        }
    });
    
    
    var $ = layui.jquery, active = {
			reload:function () {
				var productCode = $("#tube").val();
				var keyword_zc = $("#keyword_zc").val();
				table.reload('contenttable',{
					method:'get',
					where:{productCode:productCode}
					,page: {
						curr: 1 //重新从第 1 页开始
					}
				});
				table.reload('contenttable2',{
					method:'get',
					where:{productCode:productCode}
					,page: {
						curr: 1 //重新从第 1 页开始
					}
				});
				table.reload('contenttable3',{
					method:'get',
					where:{tube:productCode}
					,page: {
						curr: 1 //重新从第 1 页开始
					}
				});
				table.reload('contenttable_zc',{
					method:'get',
					where:{keyword:keyword_zc}
					,page: {
						curr: 1 //重新从第 1 页开始
					}
				});
				table.reload('contenttable4',{
					method:'get',
					where:{batchNum:$("#batchNum").val()}
					,page: {
						curr: 1 //重新从第 1 页开始
					}
				});
				table.reload('contenttable5',{
					method:'get',
					where:{keyword01:$("#batchNum").val()}
					,page: {
						curr: 1 //重新从第 1 页开始
					}
				});
				table.reload('contenttable6',{
					method:'get',
					where:{batchNum:$("#batchNum").val()}
					,page: {
						curr: 1 //重新从第 1 页开始
					}
				});
			}
		}
	$('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    
    
    table.render({
	    elem: '#leakHunting'
	    ,url:'${pageContext.request.contextPath }/productTracing/selectLeakHuntingInfoByCode.do'
	    ,title: '检漏记录'
	    ,id :'contenttable'
	    ,totalRow: true
	    ,limits:[10]
	    ,cols: [[
			   {field:'', title:'序号', sort: true, type:'numbers', width: 60}
			  ,{field:'leakHunting',width:100, title: '检漏序列',templet:'#leakHuntingList',totalRowText: '合计'}
		      ,{field:'facilityNumber', title:'设备编号'}
		      ,{field:'aDlNumBig', title:'A面堵漏个数大'}
		      ,{field:'aDlNumSmall', title:'A面堵漏个数小'}
		      ,{field:'bDlNumBig', title:'B面堵漏个数大'}
		      ,{field:'bDlNumSmall', title:'B面堵漏个数小'}
		      ,{field:'aCount', title:'A面总数',totalRow: true}
		      ,{field:'bCount', title:'B面总数',totalRow: true}
		      ,{field:'isNormal', title:'检漏是否正常'}
		      ,{field:'dmbj', title:'端面补胶'}
		      ,{field:'lhResult', title:'检漏结果'}
		      ,{field:'describe', title:'非正常描述'}
		      ,{field:'remark01', title:'查看图片',templet:function(row){
		    	  	if(row.remark01 == ''){
            			return "无图片";
		           	}else{
		 		    	return "<a href='${pageContext.request.contextPath }/attachment/samplekeep" + row.remark01 + "' download style='color:#4D61B3'>"+'查看图片'+"</a>";
		           	}
		      }}
		      ,{field:'testTime',width:160, title:'日期',templet:function (row){
            		return date2String(row.testTime);
        		}
		      }
		    ]]
	    ,page: true
	});
    
    
    table.render({
	    elem: '#gas'
	    ,url:'${pageContext.request.contextPath }/productTracing/selectGasInfoByCode.do'
	    ,title: '气密性检测记录'
	    ,id :'contenttable2'
	    ,limits:[10]
	    ,cols: [[
			   {field:'', title:'序号', sort: true, type:'numbers', width: 60}
			   ,{field:'gas',width:200, title: '气密行检测序列',templet:'#gasList'}
		      ,{field:'facilityNumber', title:'设备编号'}
		      ,{field:'gIntervalTime', title:'出泡间隔时间（s)'}
		      ,{field:'gResult', title:'气密性检测结果'}
		      ,{field:'testTime',width:200, title:'日期',templet:function (row){
            		return date2String(row.testTime);
        		}
		      }
		    ]]
	    ,page: true
	});
	
	
    table.render({
	    elem: '#ms'
	    ,url:'${pageContext.request.contextPath }/mywork/selectMs.do'
	    ,title: '膜丝检测数据'
	    ,id :'contenttable3'
	    ,limits:[10]
	    ,cols: [[
			      {field:'mbCode', title:'膜丝捆条码',width:150},
			      {field:'msFlux', title:'膜丝通量',width:100},
			      {field:'msInner', title:'尺寸内径',width:100},
			      {field:'msWall', title:'尺寸壁厚',width:100},
			      {field:'msBubble', title:'泡点压力',width:100},
			      {field:'msIntensity', title:'强度',width:100},
			      {field:'msResult', title:'检测结果',width:100},
			    ]],
	    page: true,
	});
    table.render({
	    elem: '#bomList'
	    ,url:'${pageContext.request.contextPath }/productTracing/selectBomListRatio.do'
	    ,title: '物料用量及偏差率'
	    ,id :'contenttable_zc'
	    ,limits:[10,20,30]
	    ,cols: [[
			      {field:'panum', title:'零件编号'},
			      {field:'paname', title:'零件名称'},
			      {field:'pamodel', title:'型号'},
			      {field:'paunit', title:'计量单位'},
			      {field:'packNorm', title:'包装规格'},
			      {field:'theoryQuantity', title:'理论数量'},
			      {field:'actualQuantity', title:'实际数量'},
			      {field:'deviationRate', title:'偏差率'},
			    ]],
	    page: false,
	});
    
    /* 根据批次号追溯1 */
    table.render({
	    elem: '#tableList1'
	    ,url:'${pageContext.request.contextPath }/lzProductTracing/queryIndateByBatchNum.do'
	    ,title: '线边库出库数据'
	    ,id :'contenttable4'
	    ,cols: [[
			      {field: 'reserve1', title: '入库日期',width: 200}
			    ]],
	    page: false,
	});
    
    /* 根据批次号追溯2 */
    /*table.render({
	    elem: '#tableList2'
	    ,url:'${pageContext.request.contextPath }/lzProductTracing/queryLineSideLibraryOut.do'
	    ,title: '线边库出库数据'
	    ,id :'contenttable5'
	    ,limits:[10,20,30]
	    ,cols: [[
			      {field:'productionOrder', title:'排产单号',width:200},
			      {field:'outDate', title:'出库日期',width:200, templet:function (row) {
			    	  return dateToStr(row.outDate);
			      }},
			      {field:'outQuantity', title:'出库数量',width:200},
			      {field:'batch', title:'批次号',width:200},
			      {field:'reserve1', title:'班组名称',width:200},	
			      {field:'reserve2', title:'组件编号',width:200}
			    ]],
	    page: true,
	});*/
    
    /* 根据批次号追溯3 */
    table.render({
	    elem: '#tableList3'
	    ,url:'${pageContext.request.contextPath }/lzProductTracing/queryLineSideLibraryOutByBatchNum.do'
	    ,title: '组件的数量、组件编号'
	    ,id :'contenttable6'
	    ,cols: [[
			      {field:'reserve1', title:'组件数量',width: 200},
			      {field:'reserve2', title:'组件编号',width: 200}
			    ]],
	    page: false,
	});
}); 
function selectProductTracingByOddNumber(){
	var keyword = $("#keyword_zc").val();
	$.ajax({
		type:'post'
		,url:'${pageContext.request.contextPath }/productTracing/selectProductTracingByOddNumber.do'
		,data:{'keyword':keyword}
		,dataType:'json'
		,success:function(data){
			//console.log(data)
			$("#zc_pcCount").val(data.pcCount);
			//$("#zc_dayPcCount").val(data.pcCount);
			$("#zc_starttime").val(data.starttime);
			//$("#zc_endtime").val(data.endtime);
			$("#zc_qualified").val(data.qualified);
			$("#zc_demotion").val(data.demotion);
			$("#zc_baofeiNum").val(data.baofeiNum);
		}
	})
}
toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上

<!--转换时间格式-->
function dateToStr(date) {
	var time = new Date(date.time);
	var y = time.getFullYear();
	var M = time.getMonth() + 1;
	M = M < 10 ? ("0" + M) : M;
	var d = time.getDate();
	d = d < 10 ? ("0" + d) : d;
	var str = y + "-" + M + "-" + d;
	return str;
}
</script>
</body>
</html>
